<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>行政审批-经营报表页</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
<jsp:include page="/scripts/common/index.html"></jsp:include>
<jsp:include page="/scripts/jquery/index.html"></jsp:include>
<jsp:include page="/scripts/dhtmlx/index.html"></jsp:include>
<jsp:include page="/scripts/bootstrap/index.html"></jsp:include>
<link rel="stylesheet" href="${basePath }style/default.css">
<style>
    h1,h2,h3 {
      text-align: center;
      font-size:18px;
    }
    .table1 {
      width: 100%;
    
      border-radius: 0 0 5px 5px;
      padding-bottom: 50px
    }
    .table1 table tr td, .Table1 table tr th {
      
      height: 26px;
    }
     .table1 table tr th {
       background:#0099cc;
       color:#fff
    }

  *{
		margin: 0;
		padding: 0
	}
		.top,.middle{
			
			float: left;
			height: 50px;
			padding: 5px 10px;
			margin:10px auto 0 auto;		
		}
		.middle {
		width:auto;}
		.top span, .middle{
			font-size: 12px;
		}
		.top input {
			display: inline;
			width:160px;
			background-color:#fff !important;
			cursor: pointer;
		}
		.content{
			width: 490px;
			height: 470px;
			padding: 10px 10px;
			margin:0 auto;
			border: 1px solid #ccc;
			border-top: none;
			border-radius: 0 0 5px 5px;

		}


		button {
			background-color:#0099CC;
			border:none;
			border-radius: 4px;
			width: 60px;
			height: 25px;
			color:#ffffff;
			margin-left:12px;
			font-size: 12px;
			-webkit-transition: all .3s ease-in;
			border:1px solid #fff;
		}
		button:hover {
			border:1px solid #0099CC;
			color: #0099CC;
			background-color: #fff;
		}
		select {
			height: 28px;
			font-size: 14px;
		}
		td {
			padding:0 6px
		}
		br {
			clear: both;
		}
		#header {
			width: 100%;
			border-bottom:1px solid #ccc;
			border-radius: 5px 5px 0 0;
			padding-left:10%
		}
		.td1{
		text-align: left;
		}
		.td2{
		text-align: center;
		}
		.td3{
		text-align: right;
		}
</style>
	<script type="text/javascript">
	var timestart="";
	var timeend="";
	var orglist="";
	//初始化预加载
	function init() {
		//请求表格数据
		query();	
		//单位信息
		getorginfo();
		var myCalendar = new dhtmlXCalendarObject({input:"vacationStartDate",button:"calendar_icon"});
		myCalendar.loadUserLanguage("zh");
		myCalendar.setDateFormat("%Y-%m");
		var myCalendar1 = new dhtmlXCalendarObject({input:"vacationStartDate1",button:"calendar_icon"});
		myCalendar1.loadUserLanguage("zh");
		myCalendar1.setDateFormat("%Y-%m");
		
	}
	//获取单位信息
	function getorginfo(){
		$.ajax({
			type : 'POST' ,
			url : 'page/bi/xzsp/getorgsinfo',
			data : {} ,
			dataType : "json",
			async : true ,
			cache : false ,
			jsonpCallback : "null" ,
			success : function(response, status, statusText) {
				var tablecontent=response.content;
				console.log(tablecontent);
				$("#orglist").append("<option value=''>请选择</option>");
				for(var i=0 ; i<tablecontent.length;i++){
					$("#orglist").append("<option value='"+tablecontent[i].ORG_ID+"'>"+tablecontent[i].NAME+"</option>");
					//console(tablecontent[i].ORG_FULL_NAME);
				}
			},
			error : function(response, status, statusText) {
			} ,
			complete : function(response, status, statusText) {
			}
		});
	}
	//条件查询调用
	function select(){
		timestart=$("#vacationStartDate").val();
		timeend=$("#vacationStartDate1").val();
		orglist=$("#orglist").find("option:selected").val();
		query();
		//alert(timestart);
		//alert(timeend);
		//alert(orglist);
	}
	//清除数据
	function clear(){
		$("#vacationStartDate").val("");
		$("#vacationStartDate1").val("");
	}
	//查询
	function query() {
		var v =  {};//
		var time= "";
		v["map.StartTime"] = timestart;//将选择的时间传入后台
		v["map.EndTime"] = timeend;//将选择的时间传入后台
		v["map.orglist"] = orglist;//将选择的时间传入后台
		
		$('#MyForm').bootstrapValidator('validate');
			$.ajax({
				type : 'POST' ,
				url : 'page/bi/xzsp/getjyinfo',
				data : v ,
				dataType : "json",
				async : true ,
				cache : false ,
				jsonpCallback : "null" ,
				success : function(response, status, statusText) {
					
						var table="";
						var row="";
						var tablecontent=response.content;
						console.log(tablecontent);
						var ss="<tr>"
					        +"<th  colspan='2' style='text-align: center;'>分类</th>"
					        +"<th style='text-align: center;'>计量单位</th>"
					        +"<th style='text-align: center;'>实有数</th>"
					        +"<th style='text-align: center;'>新增数</th>"
					        +"<th  style='text-align: center;'>注销数</th>"
					        +"</tr>";
					        //
					        //alert(tablecontent.length);
					        //大类型数
					        var shu=[];//记录起始的行数
					        var jishu=0;//第几个大区域
					        var shu1=[];//记录所要横跨的行数
					        shu[0]=0;
					        shu1[0]=1;
					        for (q=0;q<tablecontent.length;q++){
					          if(q>0){
					        	if(tablecontent[q].INDEXS!=tablecontent[q-1].INDEXS){
					        		jishu++;
					        		shu[jishu]=q;
					        		shu1[jishu]=1;
					        	 }else{
					        		shu1[jishu]++; 
					        	 }
					           }else{
					        		
					           }
					        }
					        
					        //alert(shu);
					        //alert(shu1);
					        jishus=0;//核对第几个大区域
							for(i=0;i<tablecontent.length;i++){
								var sss="<tr>";
								//合并行占多行
								if(i==shu[jishus]){
									sss+="<td class='td2' style='width:150px' rowspan='"+shu1[jishus]+"'>"+tablecontent[i].INDEXS+"</td>";
									jishus++;
								}
								if(tablecontent[i].实有数==null||tablecontent[i].实有数==undefined){
									tablecontent[i].实有数=0;
								}
								if(tablecontent[i].新增==null||tablecontent[i].新增==undefined){
									tablecontent[i].新增=0;
								}
								if(tablecontent[i].注销==null||tablecontent[i].注销==undefined){
									tablecontent[i].注销=0;
								}
								sss+="<td class='td1'>"+tablecontent[i].分类+"</td>";
								sss+="<td class='td2'>张</td>";
								sss+="<td class='td3'>"+tablecontent[i].实有数+"</td>";
								sss+="<td class='td3'>"+tablecontent[i].新增+"</td>";
								sss+="<td class='td3'>"+tablecontent[i].注销+"</td>";
								ss=ss+sss+"</tr>";
							}
					        
						$("#tables3").html(ss);
				} ,
				error : function(response, status, statusText) {
				} ,
				complete : function(response, status, statusText) {
				}
			});
		
	}
	//清除数据
	function clearData(){
		
		var arr = ["vacationStartDate","vacationStartDate1"];
		for(key in arr){
			$("#"+arr[key]+"").val("")
		}
		//
		$("#orglist option:first").prop("selected", 'selected');
		orglist="";
		query();
		//alert(orglist+timestart);
	}
	</script>
<style type="text/css">
  br {
    clear: both;
  }
</style>
  </head>
  
  <body onload="init()" style="margin: 0;" margin-top="0">
    <div style="display: flex">
    <!-- 右边的div -->
    <div id="tables" style="overflow:auto;width:auto;flex: 1;">
     <div id="header">
	<div class="top">

		<span>&nbsp;&nbsp;时间范围：&nbsp;&nbsp;</span>
		<input type="text" id="vacationStartDate" class="form-control" readonly="true" />
	</div>
	<div class="middle">
	    <!-- 
		<label style="font-weight: normal">单位:</label>
		<select style="width:210px;border-radius: 5px;padding: 0 10px;font-size:12px" id="orglist"></select>
		 -->
		<button onclick="select()">查询</button>
		<button onclick="clearData()">清空</button>
		<!-- 
		<button>清空</button>
		-->
	</div>
	<br>
	</div>
     <div id="Table2" class="table1">
      <h1 style="margin:24px 0">食品经营许可情况</h1>
    <table border="1" id="tables3"  bordercolor="#ccc" width="80%" border-collapse="cellspacing" cellspacing="0" align='center' style="margin: 0 auto">
          
    </table>
    </div>
      <br>    <br/><br/>
    </div>
    </div>
  </body>
</html>
